import React from "react";
import "./index.css";
import RequestUtils from "../../utils/RequestUtils";
import SessionStorageKey from "../../enum/SessionStorageKey";

export default class LoginPage extends React.Component{
    constructor(props) {
        super(props);
        this.login = this.login.bind(this);
        this.register = this.register.bind(this);
    }

    /**
     * 登录
     */
    login(){
        if(!this.form.reportValidity()) return ;
        RequestUtils.login({
            data:{
                username: this.usernameInput.value,
                password: this.passwordInput.value
            }
        }).then(({data})=>{
            sessionStorage.setItem(SessionStorageKey.userInfo, JSON.stringify(data.userInfo));
            sessionStorage.setItem(SessionStorageKey.menuList, JSON.stringify(data.menuList));
            if(this.props.success instanceof Function){
                this.props.success(data);
            }else if(this.props.history){
                this.props.history.replace("/admin");
            }
        });
    }

    /**
     * 注册
     */
    register(){
    }

    render(){
        return (
            <div className='container' style={{marginTop: "5%"}}>
                <form ref={element=>this.form = element}>
                    <div className='form-group'>
                        <label htmlFor='username'>用户名</label>
                        <input
                            ref={input=>this.usernameInput = input}
                            className='form-control'
                            type='text'
                            name='username'
                            id='username'
                            placeholder='输入您的手机号或邮箱'
                            required={true}
                            minLength={5}
                            maxLength={16}
                            pattern="^\s*?[\w\d_\u4e00-\u9fa5]+\s*?$"
                            title="中英文、数字、字母、下划线"
                        />
                    </div>
                    <div className='form-group'>
                        <label htmlFor='password'>密码</label>
                        <input
                            ref={input=>this.passwordInput = input}
                            className='form-control'
                            type='password'
                            name='password'
                            id='password'
                            placeholder='输入密码'
                            required={true}
                            minLength={5}
                            maxLength={16}
                        />
                        <small className='form-text text-muted'>为了您的信息安全，请您保管好您的密码</small>
                    </div>
                    <button type='button' onClick={this.login} className='btn btn-lg btn-primary btn-block'>登录</button>
                    <button type='button' onClick={this.register} className='btn btn-lg btn-outline-primary btn-block'>注册</button>
                </form>
            </div>
        )
    }
}
